<template>
  <div class="column-table">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">专栏管理</el-menu-item>
      <el-menu-item index="2">分类管理</el-menu-item>
    </el-menu>
    <!-- 专栏管理 -->
    <div class="margin-t" v-if="activeIndex == 1">
      <div class="margin-l margin-b margin-r50 c-overflow-h">
        <div class="fl">
          <el-button v-if="permission == 3" type="primary" @click="linkToAdd">新增专栏</el-button>
          <el-button plain @click="handCopy(columnUrl, $event)">复制链接</el-button>
          <el-button
            class="btn-sortBy"
            plain
            @click="handSortBy"
          >{{sortBy=="time" ? "手机端展示排序":"时间排序"}}</el-button>
          <!--<el-button plain @click="handSort(2)">升序</el-button>
          <el-button plain @click="handSort(1)">降序</el-button>-->
        </div>
        <div class="fr">
          <el-select clearable v-model="listQuery.selectValue" placeholder="请选择" class="width100">
            <el-option label="请选择" value></el-option>
            <el-option label="已上架" value="1"></el-option>
            <el-option label="已下架" value="2"></el-option>
            <el-option label="更新中" value="3"></el-option>
            <el-option label="已完结" value="4"></el-option>
          </el-select>
          <el-input
            clearable
            v-model="listQuery.searchName"
            placeholder="请输入专栏名称"
            @keyup.enter.native="toSearch"
            class="width250"
          ></el-input>
          <el-select v-model="listQuery.classId" placeholder="请选择分类">
            <el-option
              v-for="item in classList"
              :key="item.classname"
              :label="item.classname"
              :value="item.classId"
            ></el-option>
          </el-select>
          <el-button class="search" type="primary" icon="el-icon-search" @click="toSearch">搜索</el-button>
        </div>
      </div>
      <el-table
        @sort-change="sortChange"
        :data="tableData"
        :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
        class="c-width100 color-222 family-PingFangSC-Regular font-s12"
        v-loading="this.listLoading"
      >
        <!--<el-table-column align="center" fixed width="250" label="名称">-->
        <!--<template slot-scope="scope">-->
        <!--<img :src="scope.row.cover?scope.row.cover:'https://knowledge-payment.oss-cn-beijing.aliyuncs.com/column/2018-06-15/DU3mDplst6bhocbCANi1DKtMcrUQ8oVp8Oj2bwBi.png' " style="width: 100px;height: 50px;"/>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column align="center" label="名称">
          <template slot-scope="scope">
            <div class="clearfix">
              <div class="fl margin-r">
                <img :src="scope.row.cover" height="68" width="102" alt @error="setDefultImg" />
              </div>
              <div class="fl">
                <div class="margin-t10 font-s14 color-222 text-alignL">{{scope.row.name}}</div>
                <div class="margin-t10 font-s12 color-999 text-alignL">&yen{{scope.row.price}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" width="100" label="创建时间" prop="createdAt"></el-table-column>
        <el-table-column align="center" width="100" label="更新状态">
          <template slot-scope="scope">
            <el-radio-group
              v-model="scope.row.status"
              @change="setStause(scope.row.status,scope.row.columnId)"
            >
              <el-radio :label="1">已上架</el-radio>
              <br />
              <el-radio :label="0">已下架</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column align="center" width="100" label="上架状态">
          <template slot-scope="scope">
            <el-radio-group
              v-model="scope.row.isUpdating"
              @change="setUpdating(scope.row.isUpdating,scope.row.columnId)"
            >
              <el-radio :label="1">更新中</el-radio>
              <br />
              <el-radio :label="0">已停更</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column align="center" width="100" label="课时数">
          <template slot-scope="scope">
            <p style="text-align: center;">
              <span v-if="scope.row.isUpdating == 0">共含课时:{{ scope.row.hasCourse }}</span>
              <span v-if="scope.row.isUpdating == 1">暂含课时:{{ scope.row.hasCourse }}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" width="180" ref="sort" label="公众号列表排序" :sortable="sortable">
          <template slot-scope="scope">
            <!--<p>{{scope.row.sort}}</p>-->
            <span
              @click="editSort(scope.$index)"
              v-show="!scope.row.isEdit"
              class="tdedit"
            >{{scope.row.sort}}</span>
            <input
              @blur="saveSort(scope.$index,scope.row.columnId,scope.row.sort)"
              v-show="scope.row.isEdit"
              v-focus="scope.row.isEdit"
              class="editInput"
              min="0"
              type="number"
              name
              id
              v-model.number="scope.row.sort"
            />
          </template>
        </el-table-column>
        <el-table-column width="210" align="center" label="操作">
          <template slot-scope="scope">
            <p class="c-mb10 text-alignL">
              <b class @click="linkToDetail(scope.row.columnId)">内容管理</b>
              <span class="color-409">|</span>
              <b class v-if="permission == 3" plain @click="openDelete(scope.row.columnId)">删除</b>
              <span class="color-409" v-if="permission == 3">|</span>
              <b class @click="linkToGive(scope.row.columnId)">赠送</b>
            </p>
            <p class="text-alignL">
              <b class @click="linkToGiveList(scope.row.columnId,scope.row.name)">赠送列表</b>
              <span class="color-409">|</span>
              <b class @click="handCopy(scope.row.linkUrl, $event)">复制链接</b>
            </p>
          </template>
        </el-table-column>
      </el-table>
      <div class="block text-c">
        <!--分页组件 current-page:当前页   -->
        <!--   page-sizes:每页几条数据（选项）   -->
        <!--   page-size:每页几条数据   -->
        <!--   total:总条数   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total"
        ></el-pagination>
      </div>
    </div>
    <!-- 分类管理 -->
    <div v-if="activeIndex == 2">
      <columnSort></columnSort>
    </div>
  </div>
</template>

<script>
import defultImg from "@/assets/defult270.png";
import {
  toGetList,
  toDelete,
  toEditSort,
  toHandle,
  classGet
} from "@/api/column";
import clip from "@/utils/clipboard";
import columnSort from "./components/columnSort";
import { knowledge_columns } from "@/utils/permission";
export default {
  data() {
    return {
      defultImg,
      permission: 3,
      listQuery: {
        order: 3,
        selectValue: null,
        searchName: null,
        currentPage: 1, // 当前页
        total: null, // 数据总条数
        page: 1
      },
      isShowAdd: false,
      tableData: [
        {
          id: 0,
          img: "../../../build/logo.png",
          name: "赠送专栏",
          price: "120.00元",
          time: "21",
          order: "322"
        }
      ],
      listLoading: false,
      columnUrl: null,
      sortable: "custom",
      sortBy: "time",
      activeIndex: "1",
      classList: []
    };
  },
  components: {
    columnSort
  },
  created() {
    this.getModelPermission();
    this.getClassData();

    this.getColumnList();
  },
  directives: {
    focus(el, { value }, { context }) {
      if (value) {
        context.$nextTick(() => {
          el.focus();
        });
      }
    }
  },
  methods: {
    getClassData() {
      classGet().then(res => {
        this.classList = res.data.data.data;
      });
    },
    handleSelect(key, keyPath) {
      this.activeIndex = key;
    },
    setStause(stause, id) {
      if (stause) {
        stause = 2;
      } else {
        stause = 1;
      }
      var data = { columnId: id, type: stause };
      toHandle(data).then(res => {
        // 正确回调
        this.$message({
          type: "success",
          message: "操作成功"
        });
        this.getColumnList();
      });
    },
    setUpdating(updata, id) {
      console.log(updata);
      if (updata == 1) {
        updata = 4;
      } else {
        updata = 3;
      }
      var data = { columnId: id, type: updata };

      toHandle(data).then(res => {
        // 正确回调
        this.$message({
          type: "success",
          message: "操作成功"
        });
        this.getColumnList();
      });
    },
    sortChange(sortInfo) {
      if (sortInfo.order == "ascending") {
        this.handSort(2);
      } else if (sortInfo.order == "descending") {
        this.handSort(1);
      } else if (sortInfo.order == null) {
        this.handSort(3);
      }
    },
    getModelPermission() {
      this.permission = knowledge_columns();
    },
    getColumnList() {
      this.listLoading = true;
      toGetList(this.listQuery)
        .then(res => {
          for (var i = 0; i < res.data.data.columnData.data.length; i++) {
            res.data.data.columnData.data[i].isEdit = false;
          }
          // 正确回调
          this.columnUrl = res.data.data.columnUrl;
          this.tableData = res.data.data.columnData.data;
          this.listQuery.total = res.data.data.columnData.total;
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    hideAdd(msg) {
      this.isShowAdd = msg;
    },
    handSortBy() {
      if (this.sortBy == "time") {
        this.sortBy = "fe";
        this.sortable = false;
        this.handSort(1);
      } else if (this.sortBy == "fe") {
        this.sortBy = "time";
        this.sortable = "custom";
        this.handSort(1);
        this.$refs.sort.columnConfig.order = "descending";
      }
    },
    handSort(order) {
      this.listQuery.order = order;
      this.getColumnList();
    },
    openDelete(id) {
      this.$confirm(
        "确定删除该栏目，将导致栏目中的课程在课程列表显示?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        }
      )
        .then(() => {
          toDelete(id)
            .then(res => {
              this.$message({
                type: "info",
                message: "删除成功"
              });
              this.getColumnList();
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    linkToDetail(id) {
      this.$router.push({ path: `/knowledge/edit/${id}` });
    },
    linkToGive(id) {
      this.$router.push({ path: `/columns/give/${id}` });
    },
    linkToGiveList(id, name) {
      this.$router.push({
        path: `/columns/giveList/${id}`,
        query: { name: name }
      });
    },
    linkToAdd() {
      this.$router.push({ path: "/knowledge/create" });
    },
    handleSizeChange(val) {
      // 切换每页几条数据方法
      this.listQuery.limit = val;
      this.getColumnList();
    },
    handleCurrentChange(val) {
      // 切换当前页
      this.listQuery.page = val;
      this.getColumnList();
    },
    toSearch() {
      this.getColumnList();
    },
    handCopy(url, event) {
      clip(url, event);
    },
    setDefultImg(e) {
      e.target.src = defultImg;
    },
    editSort(index) {
      //    this.isEdit = true;
      this.tableData[index].isEdit = true;
    },
    saveSort(index, columnId, sort) {
      if (sort >= 0) {
        var data = { columnId: columnId, sort: sort };
        toEditSort(data)
          .then(res => {
            this.$message({
              type: "info",
              message: "保存成功"
            });
            this.getColumnList();
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$message({
          type: "error",
          message: "排序值不能为负数"
        });
      }

      this.tableData[index].isEdit = false;
    }
  },
  mounted() {
    this.listQuery.total = this.tableData.length;
  }
};
</script>
<style>
.column-table .el-table th > .cell {
  height: 30px;
  line-height: 30px;
}
</style>
<style scoped>
h3 {
  background: #eee;
  border-bottom: 1px solid #eee;
  padding-left: 20px;
  font-weight: 500;
  font-size: 12px;
  line-height: 30px;
  margin: 0;
}
.tdedit {
  display: inline;
  background: url(../../assets/tdedit.gif) no-repeat no-repeat right 0;
  padding-right: 14px;
}
.editInput {
  height: 22px;
  width: 40px;
}
.btn-sortBy {
  width: 140px;
}
</style>
